<template>
  <div class="construction">
    <head-main/>
    <map-main @showbotclick="showbotclick"/>
    <div class="left-main">
      <con-left/>
    </div>
    <div class="right-main">
      <con-right/>
    </div>
    <div class="btm-main" v-if="showbot">
      <conbtm/>
    </div>
    <bottom-main/>
  </div>
</template>

<script>
import HeadMain from '@/components/headMain/index.vue';
import mapMain from '@/components/mapMain/index.vue';
import BottomMain from '@/components/bottomMain/bottomMain.vue';
import ConLeft from './components/conLeft.vue';
import ConRight from './components/conRight.vue';
import Conbtm from './components/conbtm.vue';

export default {
  components: { HeadMain, mapMain, BottomMain, ConLeft, ConRight, Conbtm },
  data() {
    return {
      showbot: false
    };
  },

  mounted() {
  },

  methods: {
    showbotclick() {
      this.showbot = true
    }
  },
};
</script>

<style lang="scss" scoped>
.construction {
  width: 100%;
  height: 100%;
  .left-main {
    position: absolute;
    top: 0;
    left: 0px;
    width: 400px;
    height: 100%;
    background: linear-gradient(to right,rgba(16,44,73,.7), rgba(16,44,73,.4) 40%,rgba(16,44,73,0));
    z-index: 2;
  }
  .right-main {
    position: absolute;
    top: 0;
    right: 0px;
    width: 400px;
    height: 100%;
    background: linear-gradient(to left,rgba(16,44,73,.7), rgba(16,44,73,.4) 40%,rgba(16,44,73,0));
    z-index: 2;
  }
  .btm-main {
    position: absolute;
    bottom: 58px;
    left: 458px;
    width: calc(100% - 448px - 438px);
    height: 208px;
    z-index: 1;
  }
}
</style>